<template>
    <div ref="svgBoxRef" class="w-full h-full">
        <svg ref="svgRef" :width="svgWH.width" :height="svgWH.height">
            <defs>
                <!-- 680 240 -->
                <!-- <path id="border-box-8-path-9e4f3326514f4bb38d564fe12b9edb2e"
                    :d="`M 2.5, 2.5 L 2.5, ${svgWH.height - 2.5} L ${svgWH.width - 2.5}, 
                    ${svgWH.height - 2.5} L ${svgWH.width - 2.5}, 2.5 L 2.5, 2.5`"
                    fill="transparent"></path> -->
                <path id="border-box-8-path-9e4f3326514f4bb38d564fe12b9edb2e" :d="`M ${svgWH.width - 2.5}, ${svgWH.height - 2.5} L 2.5, ${svgWH.height - 2.5}
                    L 2.5, 2.5 L ${svgWH.width - 2.5}, 2.5 L ${svgWH.width - 2.5}, ${svgWH.height - 2.5}
                    `" fill="transparent"></path>
                <radialGradient id="border-box-8-gradient-9e4f3326514f4bb38d564fe12b9edb2e" cx="50%" cy="50%" r="50%">
                    <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
                    <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
                </radialGradient>
                <mask id="border-box-8-mask-9e4f3326514f4bb38d564fe12b9edb2e">
                    <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-9e4f3326514f4bb38d564fe12b9edb2e)">
                        <animateMotion :dur="`${dur}s`" :path="`M ${svgWH.width - 2.5}, ${svgWH.height - 2.5} L 2.5, ${svgWH.height - 2.5}
                    L 2.5, 2.5 L ${svgWH.width - 2.5}, 2.5 L ${svgWH.width - 2.5}, ${svgWH.height - 2.5}
                    `" rotate="auto" repeatCount="indefinite"></animateMotion>
                    </circle>
                </mask>
            </defs>
            <defs>
                <path id="border-box-8-path-d786c83186eb42e0983b34f1bcfe558e"
                    :d="`M2.5, 2.5 L${svgWH.width - 2.5}, 2.5 L${svgWH.width - 2.5}, ${svgWH.height - 2.5} L2.5, ${svgWH.height - 2.5} L2.5, 2.5`"
                    fill="transparent"></path>
                <radialGradient id="border-box-8-gradient-d786c83186eb42e0983b34f1bcfe558e" cx="50%" cy="50%" r="50%">
                    <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
                    <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
                </radialGradient>
                <mask id="border-box-8-mask-d786c83186eb42e0983b34f1bcfe558e">
                    <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-d786c83186eb42e0983b34f1bcfe558e)">
                        <animateMotion :dur="`${dur}s`"
                            :path="`M2.5, 2.5 L${svgWH.width - 2.5}, 2.5 L${svgWH.width - 2.5}, ${svgWH.height - 2.5} L2.5, ${svgWH.height - 2.5} L2.5, 2.5`"
                            rotate="auto" repeatCount="indefinite"></animateMotion>
                    </circle>
                </mask>
            </defs>
            <polygon fill="transparent" points="5, 5 675, 5 675 235 5, 235"></polygon>
            <use stroke-width="1" xlink:href="#border-box-8-path-9e4f3326514f4bb38d564fe12b9edb2e"
                :stroke="borderColor">
            </use>
            <use stroke-width="3" xlink:href="#border-box-8-path-9e4f3326514f4bb38d564fe12b9edb2e"
                mask="url(#border-box-8-mask-9e4f3326514f4bb38d564fe12b9edb2e)" :stroke="animateColor">
                <animate attributeName="stroke-dasharray" :from="`0, ${svgWH.pathLong}`" :to="`${svgWH.pathLong}, 0`"
                    :dur="`${dur}s`" repeatCount="indefinite">
                </animate>
            </use>
            <use stroke-width="3" xlink:href="#border-box-8-path-d786c83186eb42e0983b34f1bcfe558e"
                mask="url(#border-box-8-mask-d786c83186eb42e0983b34f1bcfe558e)" :stroke="animateColor">
                <animate attributeName="stroke-dasharray" :from="`0, ${svgWH.pathLong}`" :to="`${svgWH.pathLong}, 0`"
                    :dur="`${dur}s`" repeatCount="indefinite">
                </animate>
            </use>
        </svg>
    </div>
</template>
<script lang="ts" setup>
const props = defineProps({
    dur: {
        type: Number,
        default: () => 5
    },
    borderColor: {
        type: String,
        default: () => '#235fa7'
    },
    animateColor: {
        type: String,
        default: () => '#4583ff'
    },
})
const svgRef = ref()
const svgBoxRef = ref()
const svgWH = ref({
    width: 0,
    height: 0,
    pathLong: 0
})
onMounted(() => {
    svgWH.value.width = svgBoxRef.value.clientWidth
    svgWH.value.height = svgBoxRef.value.clientHeight
    svgWH.value.pathLong = (svgWH.value.width + svgWH.value.height) * 2 - 10
})
function start() {
    svgRef.value.unpauseAnimations();
}

function stop() {
    svgRef.value.pauseAnimations();
}
defineExpose({ start, stop })
</script>
<style lang="scss" scoped></style>